<template>
  <view class="container">
    <ikz-loading :css-data="loading_css"></ikz-loading>

    <view class="selected-all">
      <view class="drop-down-box" @click="btnShowHideClick()">
        <text class="dropdown-content">{{
          choiceContent || "选择配送方式"
        }}</text>
        <image
          class="dropdown-icon"
          :class="{ select: isShowChoice }"
          src="/static/supermarket/icon_arrow.png"
          mode="widthFix"
        ></image>
      </view>

      <view class="dialog-view" v-if="isShowChoice">
        <text
          class="dialog-title"
          v-for="(item, index) in choiceList"
          :key="index"
          @click="btnChoiceClick(index)"
          >{{ item.choiceItemContent }}</text
        >
      </view>
    </view>
    <view class="store-list">
      <div
        style="
          display: flex;
          align-items: center;
          width: 100%;
          justify-content: space-between;
        "
      >
        <view class="tit">{{ store.name }}</view>
        <!-- <view class="tit" style="color: #ffbf18">可预约</view> -->
      </div>
      <view class="column" v-for="(item, index) in shoppCart" :key="index">
        <image
          class="left"
          :src="adminImgPath + item.image"
          mode="aspectFill"
        ></image>
        <view class="center">
          <view class="name">{{ item.name }}</view>
          <view class="num">X{{ item.number }}</view>
        </view>
        <view class="right"><text>￥</text>{{ item.total }}</view>
      </view>
      <view class="price-total">
        <view class="tag">价格合计</view>
        <view class="price"><text>￥</text>{{ totalPrice }}</view>
      </view>
    </view>

    <view class="ikz-form-price-box">
      <view class="ikz-form-price-title"> 收货人 </view>
      <input
        v-model="form_data.name"
        class="ikz-form-price-input"
        style="width: 75%"
        placeholder="请输入收货人姓名"
      />
    </view>

    <view class="ikz-form-price-box">
      <view class="ikz-form-price-title"> 收货人电话 </view>
      <input
        v-model="form_data.mobile"
        type="digit"
        class="ikz-form-price-input"
        style="width: 75%"
        placeholder="请输入送货人电话"
      />
    </view>

    <!-- 收货地址 -->
    <view
      class="ikz-form-input-box ikz-afters"
      @click="goaddress"
      v-if="choiceContent == '校园跑腿'"
    >
      <image
        class="ikz-form-input-img"
        src="/static/campus/giveaddr.png"
      ></image>
      <view v-if="!address_default">收货地点(必选)</view>
      <view class="ikz-form-address" v-else>
        {{ address_default.name }}-{{ address_default.mobile }}
        <view class="ikz-form-address-detail">
          {{ address_default.group_name }}-{{ address_default.detail }}
        </view>
      </view>
    </view>

    <view class="ikz-form-price-box" v-if="choiceContent == '校园跑腿'">
      <view class="ikz-form-price-title"> 详细地址 </view>

      <input
        v-model="form_data.address_detail"
        class="ikz-form-price-input"
        style="width: 75%"
        placeholder="请输入详细地址"
      />
    </view>

    <view
      class="ikz-tab ikz-tab-content"
      style="margin-top: 70rpx"
      v-if="choiceContent == '校园跑腿'"
    >
      <view
        :class="['ikz-tab-item', activeTab === 'immediate' ? 'active' : '']"
        @click="switchTab('immediate')"
      >
        立即配送
      </view>
      <view
        :class="['ikz-tab-item', activeTab === 'reserve' ? 'active' : '']"
        @click="switchTab('reserve')"
      >
        预约单
      </view>
    </view>

    <view class="ikz-tab-content" v-if="choiceContent == '校园跑腿'">
      <block v-if="activeTab === 'immediate'">
        <view
          class="ikz-form-input-box ikz-afters"
          v-if="choiceContent == '校园跑腿'"
        >
          <image
            class="ikz-form-input-img"
            src="/static/campus/time.png"
          ></image>
          <view style="width: 80%">
            <ikz-datetime
              @returnTime="returnTime"
              :storeData="storeData"
            ></ikz-datetime>
          </view>
        </view>
      </block>
      <block v-if="activeTab === 'reserve'">
        <view
          class="ikz-form-input-box ikz-afters"
          v-if="choiceContent == '校园跑腿'"
        >
          <image
            class="ikz-form-input-img"
            src="/static/campus/time.png"
          ></image>
          <view style="width: 80%">
            <ikz-datetime2
              @returnTime="returnTime"
              :storeData="storeData"
            ></ikz-datetime2>
          </view>
        </view>
      </block>
    </view>

    <view class="ikz-form-price-box" v-if="choiceContent == '校园跑腿'">
      <view class="ikz-form-price-title"> 跑腿费 </view>
      <input
        @input="check"
        @blur="checkPrice"
        v-model="form_data.reward"
        type="digit"
        class="ikz-form-price-input"
        style="width: 75%"
        :placeholder="'请输入跑腿费最低' + min_price + '元'"
      />
    </view>

    <view class="ikz-form-price-box" v-if="choiceContent == '校园跑腿'">
      <view class="ikz-form-price-title"> 保证金 </view>
      {{ form_data.reward }}
    </view>

    <span
      v-if="choiceContent == '校园跑腿'"
      style="color: #ff5722; position: relative; left: 20rpx; top: 10rpx"
      >防止恶意退款，订单交易完成，系统会自动退回。</span
    >

    <view class="remarks">
      <view class="title">备注信息</view>
      <textarea
        v-model="remarks"
        placeholder="请输入备注信息"
        placeholder-style="fontSize: 22rpx"
      />
    </view>
    <view class="btn-box">
      <view class="btn-box-left">
        <view class="priceBox">
          <view class="hx-color-white"><text>￥</text>{{ totalPrice }}</view>
        </view>
      </view>
      <view class="btn-box-right" @click="createOrder()">
        <view class="jiesuan">立即支付</view>
      </view>
    </view>
  </view>
</template>

<script>
import ikz from "@/pages/Common/tools.js";
import ikzDatetime from "@/pages/Component/Public/Pickertime/public/datetime/index.vue";
import ikzDatetime2 from "@/pages/Component/Public/Pickertime/public/datetime2/index.vue";
import ikzLoading from "@/pages/Component/Public/Loading/loading.vue";
var app = getApp();
import Vue from "vue";
export default {
  components: {
    ikzLoading,
    ikzDatetime2,
    ikzDatetime,
  },
  data() {
    return {
      activeTab: "immediate", // 默认选中立即配送
      form_data: {
        bond: "", //保证金
        reward: "", //跑腿费
        hope_arrive: "", //期望预计送达时间
        name: "", //收款人
        address: "", //地址
        address_detail: "", //详细地址
        mobile: "", //手机号
      },
      min_price: 0.1, //默认跑腿费
      address_default: "",
      id: 0,
      scrollData: {},
      //购物车缓存 Storage 名称
      shoppingCartStorageName: "shopping_cart",
      //门店信息
      storeData: {},
      //购物车
      shoppCart: [],
      //头部选项卡 参数为 0不显示选项卡,1,2
      tabIndex: 1,
      //结算价
      totalPrice: 0,
      //已优惠价
      totalYhPrice: 0,
      //商品数量
      totalNumber: 0,
      remark: "",
      adminImgPath: app.globalData.adminImgPath,
      remarks: "",
      isShowChoice: false,
      choiceIndex: 0,
      choiceList: [
        {
          choiceItemContent: "到店自取",
          value: 1,
        },
        {
          choiceItemContent: "校园跑腿",
          value: 2,
        },
      ],
      choiceContent: "",
      orderId: 0,
      orderNo: 0,
      previousReward: 0, // 新增：记录上一次的reward值
      previousBond: 0,
      template_id: {},
      loading_css: {
        display: "flex",
      },
      isRequestingSubscribe: false, // 新增订阅状态标志
    };
  },
  onLoad(option) {
    this.templateId((res) => {
      this.loading_css.display = "none";
    });

    if (option.id) {
      this.id = option.id;
      let totalPrice = 0;
      let totalNumber = 0;
      let totalOldPrice = 0;
      let carts = uni.getStorageSync(this.shoppingCartStorageName) || [];
      if (carts) {
        //根据缓存数据 获取购物车中属于本商店的商品
        for (let i in carts) {
          if (carts[i].store_id == option.id) {
            this.shoppCart = carts[i].shopping_cart;
            this.storeData = carts[i];
            break;
          }
        }
      }
      let cj = 0;
      let op = 0;
      let p = 0;
      let num = 0;
      //计算总商品数量和总价
      for (var i in this.shoppCart) {
        this.shoppCart[i].total = Number(this.shoppCart[i].total).toFixed(2);
        p = Number(this.shoppCart[i].price);
        op = Number(this.shoppCart[i].oldprice);
        num = Number(this.shoppCart[i].number);
        totalNumber += num;
        totalPrice += p * num;
        if (op > p) {
          cj += (op - p) * num;
        }
      }
      this.totalPrice = Number(totalPrice).toFixed(2);
      this.totalYhPrice = cj;
    }
  },
  onShow() {
    this.address_default = app.globalData.user_address.address_default;
    this.form_data.destination = this.address_default.id;
    if (this.form_data.type == 2) {
      this.point_info = app.globalData.point_info || "";
      this.form_data.reward = app.globalData.point_info.id || "";
    }
    this.$forceUpdate();
  },
  methods: {
    //返回时间
    returnTime(e) {
      this.form_data.hope_arrive = e;
    },

    check: function (e) {
      const a = JSON.stringify(e);
      this.handleDepositInput(a);
      // 输入处理逻辑
      e.target.value = e.target.value.match(/^\d*(\.?\d{0,2})/g) || "";
      this.form_data.reward = e.target.value; // 始终更新reward值

      this.$nextTick(() => {
        const newValue = e.target.value === "" ? 0 : Number(e.target.value);
        const diff = newValue - this.previousReward; // 计算差值

        // 更新总价（支持增减）
        this.totalPrice = parseFloat(
          (Number(this.totalPrice) + diff).toFixed(2)
        );

        // 记录当前值供下次使用
        this.previousReward = newValue;
      });
    },

    checkPrice() {
      if (this.form_data.reward && this.form_data.bond) {
        this.form_data.reward = parseFloat(this.form_data.reward);
        this.form_data.bond = parseFloat(this.form_data.bond);
      }
      // this.form_data.total_fee = this.form_data.reward;
    },

    //我的地址
    goaddress() {
      uni.navigateTo({
        url: "/pages/Component/Module/Address/Program/myAddress/index",
      });
    },

    // 选择
    btnChoiceClick(index) {
      this.isShowChoice = false;
      this.choiceContent = this.choiceList[index].choiceItemContent;
      this.choiceIndex = this.choiceList[index].value;
    },
    // 显示与隐藏选择内容
    btnShowHideClick() {
      if (this.isShowChoice) {
        this.isShowChoice = false;
      } else {
        this.isShowChoice = true;
      }
    },
    // 处理保证金输入
    handleDepositInput(a) {
      const e = JSON.parse(a);
      console.log(e.target, "e.targete.target");
      // 输入处理逻辑
      e.target.value = e.target.value.match(/^\d*(\.?\d{0,2})/g) || "";
      this.form_data.bond = e.target.value; // 始终更新reward值

      this.$nextTick(() => {
        const newValue = e.target.value === "" ? 0 : Number(e.target.value);
        const diff = newValue - this.previousBond; // 计算差值

        this.totalPrice = parseFloat(
          (Number(this.totalPrice) + diff).toFixed(2)
        );

        // 记录当前值供下次使用
        this.previousBond = newValue;
      });
    },

    // 检查保证金价格
    checkDepositPrice() {
      if (this.form_data.bond) {
        this.form_data.bond = parseFloat(this.form_data.bond);
      }
    },
    //获取模板参数
    templateId(fn) {
      var path = "/xyb/wechat_mini_push/template_id_list";
      var data = {};
      ikz.post(path, data, (res) => {
        if (res.data.code) {
          this.template_id = res.data.data;
          console.log("template_id的值", this.template_id);
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
        fn();
      });
    },
    // 创建订单
    createOrder() {
      if (this.isRequestingSubscribe) {
        console.log("订阅请求正在进行中，请勿重复点击");
        return;
      }

      this.isRequestingSubscribe = true;

      var temp_id = [
        this.template_id.delivery_complete,
        this.template_id.order_complete,
        this.template_id.receive_order_success,
      ];

      // 直接发起订阅请求，不检查之前的订阅状态
      uni.requestSubscribeMessage({
        tmplIds: temp_id,
        success: (res) => {
          console.log("订阅结果", res);
          this.isRequestingSubscribe = false;
          this.upData(); // 继续后续流程
        },
        fail: (res) => {
          console.warn("订阅失败", res);
          this.isRequestingSubscribe = false;
          this.upData(); // 即使失败也继续后续流程

          // 可选：显示失败提示
          if (res.errCode === 20004) {
            uni.showModal({
              title: "提示",
              content: "请前往设置打开接受通知",
              showCancel: false,
            });
          } else {
            uni.showModal({
              title: "提示",
              content: "未订阅消息，可能无法接收到订单通知",
              showCancel: false,
            });
          }
        },
      });

      // ... existing code ...

      return;
      if (!this.choiceIndex) {
        uni.showModal({
          showCancel: false,
          title: "提示",
          content: "请选择取货方式",
        });
        return;
      }

      // 如果是校园跑腿，校验必填项
      if (this.choiceContent === "校园跑腿") {
        const requiredFields = [
          { field: this.form_data.name, message: "请输入收货人姓名" },
          { field: this.form_data.mobile, message: "请输入收货人电话" },
          { field: this.address_default, message: "请选择收货地点" },
          { field: this.form_data.address_detail, message: "请输入详细地址" },
          {
            field: this.form_data.hope_arrive,
            message: "请选择期望预计送达时间",
          },
          { field: this.form_data.reward, message: "请输入跑腿费" },
          { field: this.form_data.bond, message: "请输入保证金" },
        ];

        for (const { field, message } of requiredFields) {
          if (!field) {
            uni.showModal({
              showCancel: false,
              title: "提示",
              content: message,
            });
            return;
          }
        }

        // // console.log(this.min_price,'this.请输入正确的跑腿费');
        // if (!Number.isInteger(parseFloat(this.form_data.reward))) {
        //   // 检查是否为整数
        //   wx.showToast({
        //     title: "跑腿费必须为整数",
        //     icon: "error",
        //     duration: 2000,
        //   });
        //   return;
        // }
        // if (parseFloat(this.form_data.reward) < parseFloat(this.min_price)) {
        //   // 检查是否低于最低价格
        //   wx.showToast({
        //     title: "跑腿费最低为" + this.min_price + "元",
        //     icon: "error",
        //     duration: 2000,
        //   });
        //   return;
        // }
      } else {
        const requiredFields1 = [
          { field: this.form_data.name, message: "请输入收货人姓名" },
          { field: this.form_data.mobile, message: "请输入收货人电话" },
        ];
        for (const { field, message } of requiredFields1) {
          if (!field) {
            uni.showModal({
              showCancel: false,
              title: "提示",
              content: message,
            });
            return;
          }
        }
      }

      // var temp_id = [
      //   this.template_id.delivery_complete,
      //   this.template_id.order_complete,
      //   this.template_id.receive_order_success,
      // ];
      // //订阅消息
      // var that = this;
      // uni.requestSubscribeMessage({
      //   tmplIds: temp_id,
      //   success(res) {
      //     that.upData();
      //   },
      //   fail(res) {
      //     // that.up_status == 2;
      //     if (res.errCode == 20004) {
      //       uni.showModal({
      //         title: "提示",
      //         content: "请前往设置打开接受通知",
      //         confirmText: "确定",
      //         success(res) {
      //           that.upData();
      //         },
      //       });
      //     } else {
      //       uni.showModal({
      //         title: "提示",
      //         content: "未订阅消息，无法接收到订单通知",
      //         confirmText: "确定",
      //         success(res) {
      //           that.upData();
      //         },
      //       });
      //     }
      //   },
      // });
    },
    upData() {
      if (this.orderId) {
        this.payment();
        return;
      }
      var goods_param = [];
      for (var i = 0; i < this.shoppCart.length; i++) {
        let data = {
          goods_id: this.shoppCart[i].id,
          count: this.shoppCart[i].number,
        };
        goods_param.push(data);
      }
      var path = "/xyb/supermarket/order/create";
      var data = {
        goods_param: JSON.stringify(goods_param),
        delivery: this.choiceIndex, // 1商品自提 2商品代取
        remarks: this.remarks,
        bond: this.form_data.bond, //保证金
        reward: this.form_data.reward, //跑腿费
        hope_arrive: this.form_data.hope_arrive, //期望预计送达时间
        name: this.form_data.name, //收款人
        address: this.address_default.group_name + this.address_default.detail, //地址
        address_detail: this.form_data.address_detail, //详细地址
        mobile: this.form_data.mobile, //手机号
      };
      console.log(data, "datadatadata");
      //   return;
      ikz.post(path, data, (res) => {
        console.log("创建订单", res);
        if (res.data.code) {
          this.orderId = res.data.data.id;
          this.orderNo = res.data.data.order_no;
          let carts = uni.getStorageSync(this.shoppingCartStorageName);
          for (let i in carts) {
            if (carts[i].store_id == this.storeData.store_id) {
              carts.splice(i, 1);
              break;
            }
          }
          uni.setStorageSync(this.shoppingCartStorageName, carts);
          this.payment(res.data.data.id, data);
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
      });
    },
    switchTab(tab) {
      this.activeTab = tab;
      this.form_data.hope_arrive = this.returnTime;
    },
    // 调起小程序微信支付
    payment(id, item) {
      uni.showLoading({
        mask: true,
        title: "正在请求支付...",
      });
      var path = "/xyb/supermarket/order/wx_minapp_pay";
      var data = {
        order_no: this.orderNo,
        // amount: this.totalPrice
      };
      ikz.post(path, data, (res) => {
        console.log("调起小程序微信支付 ", res);
        uni.hideLoading();
        if (res.data.code == 1) {
          wx.requestPayment({
            timeStamp: res.data.data.timeStamp,
            nonceStr: res.data.data.nonceStr,
            package: res.data.data.package,
            signType: res.data.data.signType,
            paySign: res.data.data.paySign,
            success: (res) => {
              console.log("success", res);
              if (res.errMsg == "requestPayment:ok") {
                uni.showToast({
                  title: "支付成功",
                  duration: 2000,
                  icon: "success",
                });
                // 判断是自取
                if (this.choiceIndex == 1) {
                  // choiceContent;
                  setTimeout(() => {
                    uni.navigateTo({
                      url: "/pages/Component/supermarket/Program/order/index",
                    });
                  }, 1000);
                } else {
                  setTimeout(() => {
                    uni.redirectTo({
                      url: "/pages/Component/Module/Campus/Program/Order/myorder/index",
                    });
                  }, 1000);
                }
              }
            },
            fail: (res) => {
              console.log("fail", res);
              uni.showModal({
                title: "提示",
                showCancel: false,
                content: "订单已创建，请及时进行支付",
              });
            },
            complete: (res) => {
              console.log("complete", res);
            },
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: "none",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
/* 颜色变量 */
$primary-color: #ff7043;
$secondary-color: #66bb6a;
$theme-color: #ffa726;
$light-bg: #f8f8f8;
$border-color: #eeeeee;
$text-color: #333;
$light-text: #757575;
$danger-color: #ff5252;
$warning-color: #ffc107;
$success-color: #4caf50;
$info-color: #2196f3;
$disabled-color: #bdbdbd;

/* 基础样式 */
page {
  background: $light-bg;
  font-size: 28rpx;
  line-height: 1.6;
}

.container {
  padding: 20rpx;
  padding-bottom: 160rpx;

  /* 配送方式选择 */
  .selected-all {
    background: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    position: relative;

    .drop-down-box {
      padding: 25rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .dropdown-content {
        font-size: 28rpx;
        color: $primary-color;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;

        &.placeholder {
          color: $light-text;
        }
      }

      .dropdown-icon {
        width: 30rpx;
        height: 30rpx;
        transition: all 0.3s ease;
        margin-left: 15rpx;

        &.select {
          transform: rotate(180deg);
        }
      }
    }

    .dialog-view {
      position: absolute;
      width: 100%;
      background: #fff;
      z-index: 10;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      max-height: 400rpx;
      overflow-y: auto;
      border-top: 1rpx solid $border-color;

      .dialog-title {
        display: block;
        padding: 25rpx;
        font-size: 28rpx;
        color: $text-color;
        border-bottom: 1rpx solid $border-color;

        &:last-child {
          border-bottom: none;
        }

        &:active {
          background-color: rgba($primary-color, 0.05);
        }
      }
    }
  }

  /* 商品列表 */
  .store-list {
    background: #fff;
    border-radius: 12rpx;
    padding: 25rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .tit {
      font-size: 32rpx;
      font-weight: bold;
      color: $text-color;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid $border-color;
      margin-bottom: 20rpx;
    }

    .column {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid $border-color;
      transition: all 0.3s ease;

      &:active {
        background-color: rgba($primary-color, 0.05);
      }

      .left {
        width: 120rpx;
        height: 120rpx;
        border-radius: 8rpx;
        border: 1rpx solid $border-color;
        background: #fff;
        margin-right: 20rpx;
      }

      .center {
        flex: 1;
        padding: 0 20rpx;

        .name {
          font-size: 28rpx;
          color: $text-color;
          font-weight: 600;
          margin-bottom: 15rpx;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          line-height: 1.4;
        }

        .num {
          font-size: 24rpx;
          color: $light-text;
        }
      }

      .right {
        font-size: 32rpx;
        color: $primary-color;
        font-weight: bold;
        text-align: right;

        text {
          font-size: 24rpx;
        }
      }
    }

    .price-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20rpx;
      margin-top: 20rpx;
      border-top: 1rpx dashed $border-color;

      .tag {
        font-size: 28rpx;
        color: $text-color;
      }

      .price {
        font-size: 36rpx;
        color: $primary-color;
        font-weight: bold;
      }
    }
  }

  /* 表单输入 */
  .ikz-form-price-box,
  .ikz-form-input-box {
    background: #fff;
    border-radius: 12rpx;
    padding: 25rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;

    &:active {
      background-color: rgba($primary-color, 0.05);
    }

    .ikz-form-price-title {
      font-size: 28rpx;
      color: $text-color;
      font-weight: 600;
      width: 25%;
    }

    .ikz-form-price-input {
      flex: 1;
      font-size: 28rpx;
      padding: 15rpx;
      background: $light-bg;
      border-radius: 8rpx;
      border: 1rpx solid $border-color;
      transition: all 0.3s ease;

      &:focus {
        border-color: $primary-color;
        box-shadow: 0 0 0 2rpx rgba($primary-color, 0.2);
      }
    }
  }

  /* 地址选择 */
  .ikz-afters {
    position: relative;
    padding-left: 80rpx;

    .ikz-form-input-img {
      position: absolute;
      left: 25rpx;
      width: 40rpx;
      height: 40rpx;
    }

    .ikz-form-address-detail {
      color: $light-text;
      font-size: 24rpx;
      margin-top: 8rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* 标签页 */
  .ikz-tab {
    display: flex;
    background: #fff;
    border-radius: 12rpx;
    overflow: hidden;
    margin: 20rpx 0;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    &-item {
      flex: 1;
      text-align: center;
      padding: 20rpx;
      font-size: 28rpx;
      color: $light-text;
      position: relative;

      &.active {
        color: $primary-color;
        font-weight: bold;

        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 40%;
          height: 4rpx;
          background: $primary-color;
          border-radius: 4rpx;
        }
      }
    }
  }

  /* 备注区域 */
  .remarks {
    background: #fff;
    border-radius: 12rpx;
    padding: 25rpx;
    margin-top: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .title {
      font-size: 28rpx;
      color: $text-color;
      font-weight: 600;
      margin-bottom: 15rpx;
    }

    textarea {
      width: 100%;
      min-height: 200rpx;
      padding: 20rpx;
      background: $light-bg;
      border-radius: 8rpx;
      font-size: 26rpx;
      box-sizing: border-box;
      transition: all 0.3s ease;

      &:focus {
        border: 1rpx solid $primary-color;
        box-shadow: 0 0 0 2rpx rgba($primary-color, 0.2);
      }
    }
  }

  /* 底部支付栏 */
  .btn-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    display: flex;
    background: #fff;
    box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
    z-index: 10;

    &-left {
      flex: 1;
      display: flex;
      align-items: center;
      padding-left: 30rpx;
      background: $text-color;
      border-radius: 0;

      .priceBox {
        .hx-color-white {
          font-size: 36rpx;
          color: #fff;
          font-weight: bold;

          text {
            font-size: 28rpx;
          }
        }
      }
    }

    &-right {
      width: 250rpx;
      background: linear-gradient(90deg, $theme-color, $primary-color);
      border-radius: 0;

      .jiesuan {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        color: #fff;
        font-weight: bold;
        letter-spacing: 2rpx;
      }
    }
  }

  /* 保证金提示 */
  .bond-tip {
    font-size: 24rpx;
    color: $warning-color;
    padding: 10rpx 20rpx;
    background: rgba($warning-color, 0.1);
    border-radius: 8rpx;
    margin: 10rpx 20rpx 20rpx;
    line-height: 1.4;
  }
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .container {
    padding: 15rpx;
  }

  .ikz-form-price-box,
  .ikz-form-input-box {
    padding: 20rpx;
  }
}
</style>